<style lang="less" scoped>
@c-primary: #3399ff;
.panel {
  margin-bottom: 10px;
}

.echarts-wrap {
  width: 100%;
  height: 100vh;
}
</style>

<template>
  <div>
    <!-- search on loading -->
    <!-- <load v-if="loading" /> -->
    <div class="echarts-wrap">
      <mpvue-echarts v-if="show" :echarts="echarts" :onInit="onInit" canvasId="canvas" />
    </div>
  </div>
</template>
<script>
// import echarts from 'echarts';
import Load from '@/components/load';
import mpvueEcharts from 'mpvue-echarts';
// const echarts = require('../../../../static/echarts.min.js');
import * as echarts from '@/../static/echarts.min.js';

export default {
  components: {
    Load,
    mpvueEcharts
  },
  data() {
    return {
      echarts,
      title: null,
      value: [],
      onInit: this.initChart,
      show: false
    };
  },
  onLoad() {
    this.getInfos();
  },
  onUnload() {
    // this.title = null;
    // this.value = [];
    // this.echarts = null;
    // this.onInit = null;
  },
  computed: {
    loading() {
      return this.$store.getters.loading;
    }
  },
  methods: {
    async getInfos() {
      // 获取对外投资
      const url = '/app/getCompanyScore';
      let unique = '';
      try {
        unique = this.$root.$mp.page.options.Unique;
      } catch (error) {}

      const params = { unique };

      const {
        status,
        message,
        result: {
          jyCount = 0,
          cxCount = 0,
          zzCount = 0,
          xyCount = 0,
          hlCount = 0,
          ttCount = 0
        }
      } = await this.$http.get(url, params);

      if (status !== 200) {
        wx.showToast({
          title: message || '查询失败！',
          icon: 'none',
          duration: 2000
        });
        return;
      }

      this.title = ttCount;
      this.value = [jyCount, cxCount, zzCount, xyCount, hlCount];
      this.onInit = this.initChart;
      this.show = true;
    },
    initChart(canvas, width, height) {
      let chart = null;

      chart = echarts.init(canvas, null, {
        width: width,
        height: height
      });
      canvas.setChart(chart);

      const option = {
        title: {
          top: '28%',
          left: 'center',
          text: this.title,
          textStyle: {
            color: '#54f'
          }
        },
        radar: [
          {
            indicator: [
              { text: '经营状况' },
              { text: '创新能力' },
              { text: '组织背景' },
              { text: '信用历史' },
              { text: '企业活动' }
            ],
            center: ['50%', '30%'],
            radius: 120,
            startAngle: 90,
            splitNumber: 4,
            name: {
              formatter: '【{value}】',
              textStyle: {
                color: '#3399fe'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#3399fe'
              }
            },
            splitLine: {
              lineStyle: {
                // color: ['#3399fe', 'transparent', 'transparent', 'transparent'],
                width: 1
              }
            }
          }
        ],
        series: [
          {
            name: '雷达图',
            type: 'radar',
            itemStyle: {
              normal: {
                areaStyle: { type: 'default' },
                color: '#5ac3bd',
                shadowColor: 'rgba(0,0,0,0.9)'
              }
            },
            data: [
              {
                value: this.value,
                symbol: 'none',
                lineStyle: {
                  normal: {
                    width: 1
                  }
                }
              }
            ]
          }
        ]
      };
      chart.setOption(option);

      return chart; // 返回 chart 后可以自动绑定触摸操作
    }
  }
};
</script>
